<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绘制猫</title>
</head>
<body>
	
    <svg width="140" height="170" xmlns="http://www.w3.org/1999/xlink">
        <title>Cat</title>
        <desc>Stick Figure of a Cat</desc>
		<!--眼睛-->
        <circle cx="70" cy="95" r="50" style="stroke:black;fill:none" />
        <circle cx="55" cy="80" r="5" stroke="black" fill="#339933" />
        <circle cx="85" cy="80" r="5" stroke="black" fill="#339933" />
       	
        <!--右边胡须-->
        <g id="whiskers">
        	<line x1="75" y1="95" x2="135" y2="85" style="stroke:black;" />
        	<line x1="75" y1="95" x2="135" y2="105" style="stroke:black;"/>
        </g>
        
        <!--添加左边的胡须（变换坐标系统）-->
        	<!--我们使用use复用胡须分组并将它变换-->
        <use xlink:href="#whiskers" transform="scale(-1,1) translate(-140 0)"/>
        
        <!--耳朵-->
        <polyline points="108 62,  90 10,  70 45,  50, 10,  32, 62" style="stroke: black; fill: none;" />
        
        <!--嘴巴-->
        <polyline points="35 110,45 120,95 120,105,110" style="stroke: black;fill: none;" />
        	
        <!--鼻子-->
        	<!--<path>用来以尽可能简洁的方式指定路径或者一系列直线和曲线-->
        <path d="M 75 90 L 65 90 A 5 10 0  0 0 75 90" style="stroke: black; fill: #ffcccc" />
        
        <!--名字-->
        <text x="60" y="165" style="font-family: sans-serif;font-size: 14pt;stroke:none;fill: nlack;">Cat</text>
    </svg>
    
    
    
</body>
	
</html>